<template>
    <transition name="popup">
        <section class="popup" v-show="show" @click.self="closePopup">
            <div>
                <slot></slot>
            </div>
        </section>
    </transition>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue'

export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        watch(() => props.show, (newVal) => {
            if (newVal) {
                document.getElementsByTagName('body')[0].style.overflow = 'hidden'
            } else {
                document.getElementsByTagName('body')[0].style.overflow = 'auto'
            }
        },{ deep: true })
        const closePopup = ():void => {
            context.emit('update:show', false)
        }
        return {
            closePopup
        }
    }
})
</script>


<style scoped>
.popup{
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.7);
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-enter-active {
  animation: fade .2s;
}

.popup-leave-active {
  animation: fade .2s reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>